<template>
    <swiper ref="mySwiper" :options="swiperOptions" class="swiper-pagination1">
        <swiper-slide v-for="(item,index) in srcList" :key="index">
            <img v-lazy="baseURL+item.img" alt="" class="index-swiper-img" @click="$router.push({name:'FoodsDetails',query:{fid:item.fid}})" />
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
</template>
<script>
    import {
        Swiper,
        SwiperSlide
    } from "vue-awesome-swiper";
    import "swiper/swiper-bundle.min.css";
    import SwiperCore, {
        Autoplay,
        Pagination
    } from "swiper";
    SwiperCore.use([Autoplay, Pagination]);
    export default {
        name: "IndexSwiper",
        props:{
            srcList:{
                type:Array,
                require:true
            }
        },
        components: {
            Swiper,
            SwiperSlide
        },
        data() {
            return {
                swiperOptions: {
                    pagination: {
                        el: ".swiper-pagination",
                        // 点击点可以跳转图片
                        clickable: true
                    },
                    autoplay: {
                        delay: 2000,
                        // 移上去终止轮播
                        disableOnInteraction: false
                    },
                    // loop属性与v-lazy互相冲突
                    // loop:true
                }
            }
        },
        computed: {
            swiper() {
                return this.$refs.mySwiper.$swiper;
            }
        }
    }
</script>
<style lang="scss" scoped>
    .index-swiper-img {
        height: 200px;
        width: 100%;
        object-fit: cover;
    }
</style>
